<template>
	<view class="">
		<view class="ring_img" v-if="data_list.length<=0">
			<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/51188db041cc42d889872e5c800abffb.png"
				mode="widthFix"></image>
		</view>
		<scroll-view :scroll-y="true" class="scroll-box" @touchend="scroll_lower_radar" lower-threshold="20" v-else>
			<view class="radar_list" >
				<view class="radar_item" v-for="(item,index) in data_list">
					<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/c8e199c36dda451a879d9fc77efa05a9.png" mode="widthFix"></image>
					<view class="radar_info">
						<view class="info_top">
							<view class="info_name">{{item.members.nickname}}</view>
							<view class="info_time">{{item.entryTime}}</view>
						</view>
						<view class="info_see">客户查看了{{item.name}}</view>
						<view class="info_lx">在{{item.remark}}{{item.duration}}S</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		props:['data_list'],
		data(){
			return{
				
			}
		},
		methods:{
			// scroll_lower_touchend(){
			// 	this.$emit('scroll_lower_touchend')
			// },
			scroll_lower_radar() {
				this.$emit('scroll_lower_radar')
			},
		}
	}
</script>

<style lang="less">
	.ring_img image {
		width: 100%;
		margin: auto;
		display: block;
	}
	.scroll-box {
		height: 100vh;
	}
	/* 列表数据 */
	.radar_list {
		padding: 0;
		margin: 0;
		padding-bottom: 160rpx;
	
		.radar_item {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background-color: white;
			margin-bottom: 10rpx;
	
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
	
			.radar_info {
				width: 80%;
				margin-left: 40rpx;
	
				.info_top {
					display: flex;
					align-items: center;
					justify-content: space-between;
	
					.info_name {
						color: black;
						font-size: 13px;
						// font-weight: bold;
					}
	
					.info_time {
						color: gray;
						font-size: 11px;
					}
				}
			}
	
			.info_see {
				font-size: 12px;
				color: gray;
				padding-top: 8rpx;
				padding-bottom: 5rpx;
			}
	
			.info_lx {
				font-size: 12px;
				color: gray;
			}
		}
	}
	
</style>